<template>
  <div class="top-nav">
    <div class="logo-wrapper">
      <div class="logo-img"></div>


    </div>
    
    <!-- 学校选择器（带下拉选项，适用于超级管理员和区域管理员） -->
    <div class="school-selector" v-if="showSchoolSelector">
      <div class="current-school">
        <span class="school-name">{{ currentSchoolName }}</span>
        <span class="school-id" v-if="displaySchoolId">(ID: {{ displaySchoolId }})</span>
      </div>
      <div class="switch-button" @click="toggleSchoolDropdown">
        <span>切换学校</span>
        <i class="el-icon-arrow-down"></i>
      </div>
      <div class="school-dropdown" v-if="showSchoolDropdown">
        <!-- 显示条数选择器 -->
        <div class="filter-options">
          <el-select
            v-model="limit"
            placeholder="选择条数"
            size="small"
            @change="handleLimitChange"
            @click.stop
          >
            <el-option
              v-for="item in limitOptions"
              :key="item"
              :label="`${item}条/页`"
              :value="item">
            </el-option>
          </el-select>
        </div>
        <div class="filter-label">搜索条件:</div>
        <!-- 添加搜索框 -->
        <div class="school-search">
          <input 
            v-model="schoolSearchText"
            type="text" 
            placeholder="搜索学校名称或ID"
            @input="filterSchools"
            @click.stop
          />
          <i class="el-icon-search"></i>
        </div>
        
        <!-- 添加区域/地区筛选下拉菜单 -->
        <div class="filter-options" v-if="showAreaFilter">
          <div class="filter-label">按区域筛选:</div>
          <el-select 
            v-model="selectedArea" 
            placeholder="选择区域" 
            size="small" 
            @change="filterSchoolsByArea"
            @click.stop
          >
            <el-option 
              v-for="area in schoolAreas" 
              :key="area.value" 
              :label="area.label" 
              :value="area.value">
            </el-option>
          </el-select>
        </div>
        
        <!-- 显示筛选结果及结果数量 -->
        <div class="filter-result-info" v-if="filteredSchoolList.length !== displaySchoolList.length">
          找到 {{ filteredSchoolList.length }} 个结果
          <span class="clear-filter" @click.stop="clearFilter">清除筛选</span>
        </div>
        
        <!-- 学校列表，支持虚拟滚动优化性能 -->
        <div class="school-list-container" v-if="filteredSchoolList.length > 0">
          <!-- 添加字母快速索引栏，仅在学校数量大于特定值时显示 -->
          <div class="alphabet-index" v-if="filteredSchoolList.length > 15 && showLetterIndex">
            <div 
              v-for="letter in alphabetLetters" 
              :key="letter"
              class="letter-item"
              :class="{ 'has-schools': letterHasSchools(letter) }"
              @click="jumpToLetter(letter)"
            >
              {{ letter }}
            </div>
          </div>
          
          <div class="school-scrollbar">
            <!-- 添加字母分组标题 -->
            <div v-if="filteredSchoolList.length > 15 && showLetterIndex && !schoolSearchText">
              <div v-for="letter in filteredLetters" :key="letter" :id="`letter-${letter}`">
                <div class="letter-group-title">{{ letter }}</div>
                <div 
                  v-for="school in getSchoolsByFirstLetter(letter)"
                  :key="school.F_id || school.F_name" 
                  class="school-item"
                  :class="{ active: currentSchoolId === school.F_id }"
                  @click="switchSchool(school)"
                >
                  <span class="school-name">{{ school.F_name }}</span>
                  <span class="school-id" v-if="school.F_id">(ID: {{ school.F_id }})</span>
                </div>
              </div>
            </div>
            
            <!-- 默认列表（搜索时或未分组时） -->
              <div v-else class="school-items-container">
                <div 
                  v-for="(school, index) in filteredSchoolList" 
                  :key="school.F_id || index" 
                  class="school-item"
                  :class="{ active: currentSchoolId === school.F_id }"
                  @click="switchSchool(school)"
                >
                  <span class="school-name">{{ school.F_name }}</span>
                  <span class="school-id" v-if="school.F_id">(ID: {{ school.F_id }})</span>
              </div>
            </div>
          </div>
        </div>
        
        <div class="no-result" v-else>
          未找到匹配的学校
        </div>
      </div>
    </div>
    
    <!-- 学校显示（无下拉选项，适用于学校账号） -->
    <div class="school-display" v-else-if="!isLoading">
      <span class="school-name">{{ currentSchoolName }}</span>
      <span class="school-id" v-if="displaySchoolId">(ID: {{ displaySchoolId }})</span>
    </div>
    
    <!-- 加载中状态 -->
    <div class="school-display" v-else>
      <span class="school-name">加载学校信息中...</span>
    </div>
    
    <!-- 使用Element Plus的导航菜单组件 -->
    <el-menu 
      v-if="!menuLoading && filteredNavList.length > 0"
      :default-active="currentActiveMenu" 
      class="nav-menu" 
      mode="horizontal" 
      :background-color="'#fff'"
      :text-color="'#333'"
      :active-text-color="'#40DBBC'"
      @select="handleSelect"
      :router="true"
    >
      <!-- 动态渲染菜单项 -->
      <template v-for="menu in filteredNavList" :key="menu.id || menu.path">
        <!-- 顶部导航栏只显示顶级菜单，不显示子菜单 -->
        <!-- 子菜单应该在页面内容区域的子导航中显示 -->
        <el-menu-item
          :index="menu.path"
          :route="menu.path"
        >
          {{ menu.name }}
        </el-menu-item>
      </template>
    </el-menu>
    
    <div class="user-info">
      <div class="avatar">
        <img src="@/assets/image/common/icon-user.svg" alt="" />
      </div>
      
      <!-- 使用Element Plus的Dropdown组件替换原有的下拉菜单 -->
      <el-dropdown trigger="click" @command="handleCommand" placement="bottom-end">
        <div class="user-name-dropdown">
          <span class="user-name-text">{{ userName }}</span>
          <i class="el-icon-arrow-down"></i>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
          <el-dropdown-item command="importStudentTeacher">导入师生</el-dropdown-item>
          <el-dropdown-item command="exportStudentTeacher">导出师生</el-dropdown-item>
          <el-dropdown-item v-if="isAreaAdmin && isPromotionTime" command="promotion">高中升级</el-dropdown-item>
          <el-dropdown-item divided command="exit">退出</el-dropdown-item>
        </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex';
import { HIDE_RIGHT_MANAGE_ROLE_LIST } from '@/utils/constant';
// import VirtualList from 'vue-virtual-scroll-list'; // Vue 3 不兼容，已移除虚拟滚动功能
import { ElMenu, ElSubMenu, ElMenuItem, ElProgress } from 'element-plus';
import { downloadExcelBlob } from '@/utils/utils';
import { addMenuChildrenRoutes } from '@/router';

// 学校项组件定义
const SchoolItem = {
  props: {
    source: {
      type: Object,
      required: true
    },
    isActive: {
      type: Boolean,
      default: false
    }
  },
  render(h) {
    return h('div', {
      class: {
        'school-item': true,
        'active': this.isActive
      }
    }, [
      h('span', {
        class: 'school-name'
      }, this.source.F_name),
      this.source.F_id ? h('span', {
        class: 'school-id'
      }, `(ID: ${this.source.F_id})`) : null
    ]);
  }
};

export default {
  name: 'TopNav',
     components: {
     // VirtualList, // Vue 3 不兼容，已移除
     'el-menu': ElMenu,
     'el-submenu': ElSubMenu,
     'el-menu-item': ElMenuItem,
     'el-progress': ElProgress
   },
  data() {
    return {
      allNavList: [], // 从后端获取的菜单列表
      menuLoading: false, // 菜单加载状态
      showDropDown: false,
      showSchoolDropdown: false,
      isLoading: true,
      
      // 学校列表相关数据
      schoolsList: [], // 本地保存的学校列表
      schoolsCount: 0,
      page: 1,
      limit: 20,
      keyword: '',
      areaId: '',
      schoolType: { id: '' },
      
      // 学校选择器新增数据
      schoolSearchText: '',
      filteredSchoolList: [],
      selectedArea: '',
      showAreaFilter: false,
      schoolAreas: [],
      limitOptions: [20, 50, 100, 200, 500],
      
      // 学校列表虚拟滚动配置（已移除，Vue 3 不兼容）
      // schoolItemComponent: SchoolItem,
      
      // 字母索引配置
      alphabetLetters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      showLetterIndex: true // 控制是否显示字母索引
    };
  },
  computed: {
    ...mapState('user', ['userInfo', 'accountInfo', 'menuTree', 'menuList']),
    ...mapState('base', ['isFromExamWeb']),
    ...mapGetters('user', ['userPermission', 'userName', 'isSuperAdmin', 'userRole']),
    ...mapState('school', ['currentSchoolId']),
    ...mapGetters('school', ['schoolName', 'schoolId']),
    
    // 当前实际激活的菜单路径（用于显示选中状态）
    currentActiveMenu() {
      // 获取当前路由路径
      const currentPath = this.$route.path;
      
      // 检查是否是权限管理相关路径
      if (currentPath.startsWith('/homepage/rightsManage')) {
        return '/homepage/rightsManage';
      }
      
      // 检查是否是教学管理相关路径
      if (currentPath.startsWith('/homepage/class/')) {
        return '/homepage/class';
      }
      
      // 检查本地存储中的菜单选择
      const lastSelectedMenu = sessionStorage.getItem('lastSelectedMenu');
      if (lastSelectedMenu && (
          currentPath === lastSelectedMenu || 
          currentPath.startsWith(lastSelectedMenu + '/')
      )) {
        return lastSelectedMenu;
      }
      
      // 其他路径保持不变
      return currentPath;
    },
    
    // 当前激活的导航项 (用于内部逻辑处理)
    activeIndex() {
      // 复用当前激活菜单的逻辑
      return this.currentActiveMenu;
    },
    
    // 获取当前显示的学校ID
    displaySchoolId() {
      // 如果store中有schoolId，优先使用
      if (this.schoolId) {
        return this.schoolId;
      }
      
      // 如果有当前学校ID且能在学校列表中找到对应学校
      if (this.currentSchoolId && this.schoolsList && this.schoolsList.length > 0) {
        const school = this.schoolsList.find(s => s.F_id === this.currentSchoolId);
        if (school) {
          return school.F_id;
        }
      }
      
      // 使用当前选择的学校ID
      if (this.currentSchoolId) {
        return this.currentSchoolId;
      }
      
      return '';
    },
    
    // 当前学校名称
    currentSchoolName() {
      // 首先尝试从当前选择的学校获取名称
      if (this.currentSchoolId && this.schoolsList && this.schoolsList.length > 0) {
        const school = this.schoolsList.find(s => s.F_id === this.currentSchoolId);
        if (school) {
          return school.F_name;
        }
      }
      
      // 如果从store中的schoolInfo获取到了名称
      if (this.schoolName) {
        return this.schoolName;
      }
      
      // 如果没有当前选择的学校，但有学校列表，则使用第一个学校
      if (this.schoolsList && this.schoolsList.length > 0) {
        return this.schoolsList[0].F_name;
      }
      
      // 如果从用户权限中有学校信息
      if (this.userPermission && this.userPermission.school_list && this.userPermission.school_list.length > 0) {
        return this.userPermission.school_list[0].F_name;
      }
      
      return '未查询到该账号下的学校列表';
    },
    
    // 用于显示和切换的学校列表
    displaySchoolList() {
      return this.schoolsList;
    },
    
    // 【修复】显示条件对齐学校管理组件
    showSchoolSelector() {
      // 检查用户角色是否为超级管理员
      const isSuperAdmin = this.userRole === '7';
      
      // 如果不是超管，检查用户权限级别
      let userLevel = 4; // 默认为学校级别
      
      if (!isSuperAdmin && this.userPermission) {
        userLevel = this.userPermission.level || 4;
      }
      
      console.log('学校选择器权限检查:', {
        isSuperAdmin,
        userRole: this.userRole,
        userPermission: this.userPermission,
        userLevel,
        schoolListLength: this.schoolsList?.length || 0
      });
      
      // 必须是超管或区域管理员(级别<=3)
      const hasAuthority = isSuperAdmin || userLevel <= 3;
      
      // 必须有多个学校才显示切换按钮
      const hasMultipleSchools = Array.isArray(this.schoolsList) && this.schoolsList.length > 1;
      
      return hasAuthority && hasMultipleSchools;
    },
    
    filteredNavList() {
      // 优先使用 menuList（从 store 获取），如果没有则使用 allNavList
      const menuSource = this.menuList && this.menuList.length > 0 ? this.menuList : this.allNavList;
      
      // 如果菜单数据还未加载，返回空数组
      if (!menuSource || menuSource.length === 0) {
        return [];
      }
      
      // 只显示顶级菜单（parent_id === 0）且是菜单项类型（menu_type === 1 或 undefined）
      // 过滤掉功能按钮（menu_type === 2）和子菜单项
      const result = [];
      menuSource.forEach(menu => {
        // 只包含顶级菜单（parent_id === 0 或 undefined，兼容旧数据）
        // 且只包含菜单项类型（menu_type === 1 或 undefined，排除功能按钮 menu_type === 2）
        const isTopLevel = !menu.parent_id || menu.parent_id === 0;
        const isMenuItem = !menu.menu_type || menu.menu_type === 1;
        
        if (isTopLevel && isMenuItem) {
          result.push({
            name: menu.menu_name,
            path: menu.menu_path,
            icon: menu.menu_icon,
            id: menu.id,
            children: menu.children || []
          });
        }
      });
      
      return result;
    },
    
         // 判断是否为区域管理员
     isAreaAdmin() {
       return this.userInfo.role === '区域管理员';
     },
     
     // 判断是否在升学操作时间范围内（7、8月份）
     isPromotionTime() {
       const currentDate = new Date();
       const currentMonth = currentDate.getMonth() + 1; // getMonth() 返回 0-11，所以需要 +1
       return currentMonth === 7 || currentMonth === 8;
     },
    
    // 过滤有学校的字母
    filteredLetters() {
      const letters = new Set();
      
      this.filteredSchoolList.forEach(school => {
        if (school.F_name && school.F_name.length > 0) {
          // 获取学校名称的首字母并转换为大写
          const firstChar = school.F_name.charAt(0).toUpperCase();
          // 检查是否为拉丁字母
          if (/[A-Z]/.test(firstChar)) {
            letters.add(firstChar);
          } else {
            // 对于非拉丁字母（如中文），可以先归类到"其他"，或尝试获取拼音首字母
            // 这里简化处理，将所有非英文字母的归为"其他"分类
            letters.add('#');
          }
        }
      });
      
      // 转为数组并按字母排序
      return Array.from(letters).sort((a, b) => {
        if (a === '#') return 1;
        if (b === '#') return -1;
        return a.localeCompare(b);
      });
    }
  },
  watch: {
    // 监听 menuList 变化，更新 allNavList
    menuList: {
      handler(newVal) {
        if (newVal && Array.isArray(newVal) && newVal.length > 0) {
          console.log('menuList 变化，更新 allNavList，菜单数量:', newVal.length);
          this.allNavList = newVal;
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    ...mapActions('school', ['SET_CURRENT_SCHOOL', 'GET_SCHOOL_DETAIL', 'GET_SCHOOL_OPTIONS', 'RESET_SCHOOL']),
    
    // 获取用户菜单列表（从 store 中的 menuTree 获取顶级菜单）
    async getUserMenus() {
      try {
        this.menuLoading = true;
        
        // 从 store 中获取菜单树（登录时已经通过 fetchAllButtonPermissions 加载了完整的菜单树）
        const menuTree = this.$store.getters['user/menuTree'];
        
        if (menuTree && Array.isArray(menuTree) && menuTree.length > 0) {
          // menuTree 已经是顶级菜单列表（包含所有子菜单和按钮）
          this.allNavList = menuTree;
          console.log('从 store 获取顶级菜单成功，菜单数量:', menuTree.length);
        } else {
          // 如果 store 中没有菜单树，尝试获取
          console.log('store 中菜单树为空，尝试获取完整菜单树');
          await this.$store.dispatch('user/fetchAllButtonPermissions');
          const updatedMenuTree = this.$store.getters['user/menuTree'];
          if (updatedMenuTree && Array.isArray(updatedMenuTree) && updatedMenuTree.length > 0) {
            this.allNavList = updatedMenuTree;
            console.log('获取完整菜单树成功，菜单数量:', updatedMenuTree.length);
          } else {
            console.warn('获取菜单树失败或菜单为空');
            this.allNavList = [];
          }
        }
      } catch (error) {
        console.error('获取菜单失败:', error);
        this.allNavList = [];
      } finally {
        this.menuLoading = false;
      }
    },
    
    toExit() {
      // 清除所有模块的状态（包括 sessionStorage）
      this.$store.dispatch('clearAllState');
      
      if (this.isFromExamWeb) {
        window.close();
      } else {
        this.$router.push({
          path: '/login'
        });
      }
    },
    navigateTo(path) {
      this.$router.push(path);
    },
    isActive(path) {
      return this.$route.path === path;
    },
    // 切换学校下拉框显示状态
    toggleSchoolDropdown(event) {
      if (event) {
        event.stopPropagation();
      }
      this.showSchoolDropdown = !this.showSchoolDropdown;
      
      // 当显示下拉框时，初始化筛选列表和区域列表
      if (this.showSchoolDropdown) {
        this.filteredSchoolList = this.displaySchoolList;
        this.initAreaFilter();
      }
    },
    // 切换选择的学校
    async switchSchool(school) {
      if (this.currentSchoolId === school.F_id) {
        this.showSchoolDropdown = false;
        return;
      }
      
      // 设置当前选中的学校
      await this.SET_CURRENT_SCHOOL(school.F_id);
      
      // 获取学校详情和选项
      await this.GET_SCHOOL_DETAIL({ school_id: school.F_id });
      await this.GET_SCHOOL_OPTIONS({ school_id: school.F_id });
      
      console.log('切换学校后的信息:', {
        currentSchoolId: this.currentSchoolId,
        schoolId: this.schoolId,
        displaySchoolId: this.displaySchoolId,
        schoolInfo: this.$store.state.school.schoolInfo
      });
      
      // 刷新当前页面数据
      this.refreshCurrentPage();
      
      this.showSchoolDropdown = false;
    },
    // 刷新当前页面数据
    refreshCurrentPage() {
      // 根据当前路由判断要刷新的内容
      const path = this.$route.path;
      
      // 如果当前在学校管理相关页面，无需特殊处理
      if (path.includes('/schoolManage')) {
        return;
      }
      
      // 通过触发一个路由切换来刷新页面内容
      const currentPath = this.$route.fullPath;
      // 使用临时中间路由来避免直接导航到当前路由
      const tempPath = '/homepage' + (path.includes('/student') ? '/teacher' : '/student');
      
      // 先导航到临时路由再回到当前路由
      this.$router.replace(tempPath).then(() => {
        this.$nextTick(() => {
          this.$router.replace(currentPath).catch(err => {
            console.log('路由导航被忽略：', err.message);
          });
        });
      }).catch(err => {
        console.log('临时路由导航被忽略：', err.message);
      });
    },
    // 处理点击外部关闭下拉菜单
    handleOutsideClick(event) {
      // 如果点击的不是学校选择器内部的元素，关闭下拉菜单
      const schoolSelector = this.$el.querySelector('.school-selector');
      if (schoolSelector && !schoolSelector.contains(event.target)) {
        this.showSchoolDropdown = false;
      }
      
      const userDropdown = this.$el.querySelector('.drop-down');
      const userTrigger = this.$el.querySelector('.user-name');
      
      if (userDropdown && !userDropdown.contains(event.target) && !userTrigger.contains(event.target)) {
        this.showDropDown = false;
      }
    },
    // 直接获取学校列表
    async getSchools() {
      try {
        this.isLoading = true;
        const res = await this.$api.getSChoolsByAdmin({
          F_page: this.page,
          F_limit: this.limit,
          F_area_id: this.areaId,
          F_school_type: this.schoolType.id,
          F_search_name: this.keyword,
        });
        this.handleSchoolResult(res);
      } catch (error) {
        console.error('获取学校列表失败:', error);
      } finally {
        this.isLoading = false;
      }
    },
    
    // 按ID获取学校列表 (针对权限受限情况)
    async getSchoolsByIds(schoolIds) {
      try {
        this.isLoading = true;
        const res = await this.$api.getSchoolsByIds({
          F_school_ids: schoolIds.join(','),
        });
        res.F_schools = res.F_school || [];
        this.handleSchoolResult(res);
      } catch (error) {
        console.error('按ID获取学校列表失败:', error);
      } finally {
        this.isLoading = false;
      }
    },
    
    // 处理学校数据结果
    handleSchoolResult(res) {
      this.schoolsList = res.F_schools || [];
      this.schoolsCount = res.F_total || this.schoolsList.length;
      
      // 处理学校数据，添加必要的字段
      this.schoolsList.forEach((school) => {
        if (school.F_loc) {
          const { F_prov_name = '', F_city_name = '', F_district_name = '' } = school.F_loc;
          school.F_location = F_prov_name + F_city_name + F_district_name;
        }
        
        if (school.F_admin) {
          const { F_name = '', F_account = '' } = school.F_admin;
          school.F_admin_name = F_name;
          school.F_admin_account = F_account;
        }
      });
    },
    
    // 筛选学校列表
    filterSchools() {
      if (!this.schoolSearchText) {
        this.filteredSchoolList = this.displaySchoolList;
        return;
      }
      
      const searchText = this.schoolSearchText.toLowerCase();
      this.filteredSchoolList = this.displaySchoolList.filter(school => {
        return (
          (school.F_name && school.F_name.toLowerCase().includes(searchText)) || 
          (school.F_id && school.F_id.toString().includes(searchText))
        );
      });
    },
    
    // 根据地区筛选学校
    filterSchoolsByArea() {
      if (!this.selectedArea) {
        this.filteredSchoolList = this.displaySchoolList;
        return;
      }
      
      this.filteredSchoolList = this.displaySchoolList.filter(school => {
        // 获取学校的区域信息，可能在F_location或其他字段中
        const schoolArea = school.F_location || '';
        return schoolArea.includes(this.selectedArea);
      });
    },
    
    // 清除所有筛选
    clearFilter() {
      this.schoolSearchText = '';
      this.selectedArea = '';
      this.filteredSchoolList = this.displaySchoolList;
    },
    
    // 处理虚拟列表项点击
    handleSchoolItemClick(item) {
      if (item && item.F_id) {
        this.switchSchool(item);
      }
    },
    
    // 获取学校列表并初始化
    async initSchoolList() {
      try {
        this.isLoading = true;
        
        // 获取用户权限信息
        const { isSuperAdmin } = this;
        const userPermission = this.userPermission;
        
        console.log('initSchoolList 开始获取学校列表:', {
          isSuperAdmin,
          userPermission
        });
        
        // 如果是超级管理员或区域管理员（level <= 3），获取管理的所有学校
        if (isSuperAdmin || (userPermission && userPermission.level <= 3)) {
          console.log('以超级管理员或区域管理员身份获取学校列表');
          await this.getSchools();
        } 
        // 如果是学校账户，获取自己所属的学校
        else if (userPermission && userPermission.school_list && userPermission.school_list.length > 0) {
          console.log('从用户权限中获取学校列表');
          const schoolIds = userPermission.school_list.map(school => school.F_id);
          if (schoolIds.length > 0) {
            await this.getSchoolsByIds(schoolIds);
          } else {
            // 如果没有学校列表，直接使用权限中的基本信息
            this.schoolsList = userPermission.school_list;
          }
        }
        
        console.log('学校列表获取结果:', {
          schoolsList: this.schoolsList,
          currentSchoolId: this.currentSchoolId,
          schoolName: this.schoolName
        });
        
        // 如果有学校列表且未设置当前ID，设置第一所学校为当前学校
        if (this.schoolsList && this.schoolsList.length > 0) {
          let schoolIdToUse = this.currentSchoolId;
          
          // 如果没有当前学校ID，使用第一所学校
          if (!schoolIdToUse) {
            schoolIdToUse = this.schoolsList[0].F_id;
            console.log('设置第一所学校为当前学校:', schoolIdToUse);
            await this.SET_CURRENT_SCHOOL(schoolIdToUse);
          }
          
          // 获取学校详情和选项
          await this.GET_SCHOOL_DETAIL({ school_id: schoolIdToUse });
          await this.GET_SCHOOL_OPTIONS({ school_id: schoolIdToUse });
          
          console.log('学校详情获取结果:', {
            schoolIdToUse,
            schoolInfo: this.$store.state.school.schoolInfo,
            schoolId: this.schoolId
          });
        }
      } catch (error) {
        console.error('获取学校列表失败:', error);
      } finally {
        this.isLoading = false;
      }
    },
    
    // 初始化区域过滤器
    initAreaFilter() {
      // 提取学校区域信息作为筛选选项
      if (this.displaySchoolList && this.displaySchoolList.length > 0) {
        // 检查是否有区域信息字段
        const hasLocationInfo = this.displaySchoolList.some(school => school.F_location);
        this.showAreaFilter = hasLocationInfo;
        
        if (hasLocationInfo) {
          // 提取唯一的区域列表
          const areas = [...new Set(
            this.displaySchoolList
              .map(school => school.F_location)
              .filter(Boolean)
          )];
          
          this.schoolAreas = areas.map(area => ({
            label: area,
            value: area
          }));
        }
      } else {
        this.showAreaFilter = false;
      }
    },
    
    // 检查某个字母是否有对应的学校
    letterHasSchools(letter) {
      return this.filteredLetters.includes(letter);
    },
    
    // 跳转到特定字母开头的学校组
    jumpToLetter(letter) {
      if (!this.letterHasSchools(letter)) return;
      
      // 获取字母组元素
      const el = document.getElementById(`letter-${letter}`);
      if (el && this.$refs.schoolListScrollbar) {
        // 使用Element UI的scrollbar组件滚动到指定位置
        this.$refs.schoolListScrollbar.wrap.scrollTop = el.offsetTop;
      }
    },
    
    // 获取特定首字母的学校列表
    getSchoolsByFirstLetter(letter) {
      return this.filteredSchoolList.filter(school => {
        if (!school.F_name) return false;
        
        const firstChar = school.F_name.charAt(0).toUpperCase();
        if (letter === '#') {
          return !/[A-Z]/.test(firstChar);
        }
        return firstChar === letter;
      });
    },
    
    // 处理下拉菜单命令
    handleCommand(command) {
      if (command === 'exit') {
        this.toExit();
      } else if (command === 'importStudentTeacher') {
        this.showImportDialog();
      } else if (command === 'exportStudentTeacher') {
        this.showExportDialog();
      } else if (command === 'promotion') {
        this.handlePromotion();
      }
    },
    
    // 显示导入师生对话框
    showImportDialog() {
      this.$import(this.currentSchoolId, this.$maps.importType.SCHOOL, async () => {
        this.$toast('批量导入学校数据成功');
        await this.GET_SCHOOL_OPTIONS({
          school_id: this.currentSchoolId,
        });
        // 刷新当前页面数据
        this.refreshCurrentPage();
      });
    },
    
    // 显示导出师生对话框
    async showExportDialog() {
      this.loading = true;
      try {
        

        const isExamAdmin = this.userInfo.role === '阅卷管理员' || this.userInfo.role === '区域管理员';
        const school_id = isExamAdmin ? 0 : this.currentSchoolId;
        const res =isExamAdmin? await this.$api.exportTeacherAndStudents({
          F_school_id: school_id, }) :await this.$api.exportSchoolData({ F_school_id: school_id, }); 
        console.log(res);
        downloadExcelBlob(res, `${this.currentSchoolName}信息`);
      } catch (e) {
        console.error(e);
        this.$toast('导出学校信息失败,请联系后台管理员');
      }
      this.loading = false;
    },
    
    // 处理升学操作
    handlePromotion() {
      this.$EleMessageBox.confirm('是否确认该升学操作，一旦点击以后不能回退，请谨慎操作！', '升学确认', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
        customClass: 'promotion-confirm-dialog'
      }).then(() => {
        // 用户点击确认后执行升学操作
        this.executePromotion();
      }).catch(() => {
        // 用户点击取消，不做任何操作
        this.$message({
          type: 'info',
          message: '已取消升学操作'
        });
      });
    },
    
             // 执行升学操作
    async executePromotion() {
      try {
        this.loading = true;
        
        // 显示进度条对话框
        const progressDialog = this.$EleMessageBox({
          title: '高中升学操作进行中',
          message: this.$createElement('div', [
            this.$createElement('p', { style: 'margin-bottom: 15px;' }, '正在执行高中升学操作，请稍候...'),
            this.$createElement('div', { 
              style: 'width: 100%; height: 20px; background-color: #f0f9ff; border-radius: 10px; overflow: hidden; position: relative;'
            }, [
              this.$createElement('div', {
                style: 'width: 0%; height: 100%; background: linear-gradient(90deg, #409eff, #67c23a); transition: width 0.3s ease; border-radius: 10px;',
                ref: 'progressBar'
              }),
              this.$createElement('div', {
                style: 'position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; color: #333; font-size: 12px; font-weight: bold;',
                ref: 'progressText'
              }, '0%')
            ])
          ]),
          showCancelButton: false,
          showConfirmButton: false,
          closeOnClickModal: false,
          closeOnPressEscape: false,
          customClass: 'promotion-progress-dialog'
        });
        
        // 模拟进度更新
        let progress = 0;
        const progressInterval = setInterval(() => {
          progress += Math.random() * 15;
          if (progress > 90) progress = 90;
          
          // 更新进度条
          const progressBar = document.querySelector('.promotion-progress-dialog .el-message-box__content div[style*="background: linear-gradient"]');
          const progressText = document.querySelector('.promotion-progress-dialog .el-message-box__content div[style*="position: absolute"]');
          
          if (progressBar) {
            progressBar.style.width = Math.floor(progress) + '%';
          }
          if (progressText) {
            progressText.textContent = Math.floor(progress) + '%';
          }
        }, 500);
        
        // 调用升学API，不传递学校ID参数
        const params = {};
        
        console.log('调用升学API，参数:', params);
        const res = await this.$api.gradeUpgrade(params);
        
        console.log('升学API响应:', res);
        
        // 清除进度定时器
        clearInterval(progressInterval);
        
        // 完成进度
        const progressBar = document.querySelector('.promotion-progress-dialog .el-message-box__content div[style*="background: linear-gradient"]');
        const progressText = document.querySelector('.promotion-progress-dialog .el-message-box__content div[style*="position: absolute"]');
        
        if (progressBar) {
          progressBar.style.width = '100%';
        }
        if (progressText) {
          progressText.textContent = '100%';
        }
        
        // 等待一秒让用户看到100%进度
        await new Promise(resolve => setTimeout(resolve, 1000));
        
        // 关闭进度对话框
        this.$EleMessageBox.close();
        
        if (res.F_responseNo === 10000) {
          this.$message.success('高中升学操作执行成功！');
          // 刷新当前页面数据
          this.refreshCurrentPage();
        } else {
          this.$message.error(`升学操作失败: ${res.F_responseMsg || '未知错误'}`);
        }
      } catch (error) {
        console.error('升学操作失败:', error);
        this.$message.error('升学操作失败，请联系后台管理员');
      } finally {
        this.loading = false;
      }
    },
    async handleSelect(index) {
      // 使用router模式时，Element UI 会自动处理路由导航
      // 但是我们可以在这里添加一些额外的逻辑
      console.log('菜单选择:', index);
      
      // 从菜单树中查找当前点击的菜单信息
      const menuTree = this.$store.state.user.menuTree || [];
      const findMenuInTree = (menus, targetPath) => {
        for (const menu of menus) {
          if (menu.menu_path === targetPath || menu.path === targetPath) {
            return menu;
          }
          if (menu.children && Array.isArray(menu.children) && menu.children.length > 0) {
            const found = findMenuInTree(menu.children, targetPath);
            if (found) return found;
          }
        }
        return null;
      };
      
      const selectedMenu = findMenuInTree(menuTree, index);
      
      if (selectedMenu) {
        console.log('选中的菜单:', selectedMenu);
        
        // 检查菜单是否有子菜单（只检查 menu_type === 1 的子菜单）
        const hasChildren = selectedMenu.children && 
                           Array.isArray(selectedMenu.children) && 
                           selectedMenu.children.length > 0 &&
                           selectedMenu.children.some(child => child.menu_type === 1);
        
        // 检查是否已经有功能按钮（menu_type === 2）
        const hasButtons = selectedMenu.children && 
                          Array.isArray(selectedMenu.children) && 
                          selectedMenu.children.some(child => child.menu_type === 2);
        
        // 登录时已经通过 fetchAllButtonPermissions 获取了完整的菜单树（包含所有子菜单和按钮）
        // 所以这里不需要再调用 fetchMenuChildren
        if (hasChildren || hasButtons) {
          console.log('菜单已有子菜单和功能按钮，子菜单数量:', 
            selectedMenu.children.filter(c => c.menu_type === 1).length,
            '功能按钮数量:', 
            selectedMenu.children.filter(c => c.menu_type === 2).length
          );
          
          // 如果菜单有子菜单，确保路由已添加
          if (hasChildren && selectedMenu.children) {
            const subMenus = selectedMenu.children.filter(c => c.menu_type === 1);
            if (subMenus.length > 0) {
              addMenuChildrenRoutes(selectedMenu);
              console.log('已为菜单添加子路由:', selectedMenu.menu_name);
            }
          }
        } else {
          console.warn('菜单缺少子菜单或功能按钮，菜单ID:', selectedMenu.id, '这可能是数据问题');
        }
      } else {
        // 如果从菜单树中找不到，尝试从 allNavList 中查找
        // 登录时已经获取了完整的菜单树，所以这里不需要再获取子菜单
        const menuFromList = this.allNavList.find(menu => menu.menu_path === index || menu.path === index);
        if (menuFromList) {
          console.log('从 allNavList 中找到菜单:', menuFromList.menu_name);
        }
      }
      
      // 处理特殊菜单项
      if (index === '/homepage/rightsManage') {
        // 权限管理菜单有默认子路由，保存特定的父菜单路径
        sessionStorage.setItem('lastSelectedMenu', '/homepage/rightsManage');
      } else if (index === '/homepage/class') {
        // 教学管理菜单有默认子路由，保存特定的父菜单路径
        sessionStorage.setItem('lastSelectedMenu', '/homepage/class');
      } else {
        // 保存到本地存储，以便页面刷新后恢复
        sessionStorage.setItem('lastSelectedMenu', index);
      }
      
      // 对于非路由路径的特殊处理，例如外部链接或特殊操作
      // 如果不是以/开头，可能是特殊操作命令
      if (typeof index === 'string' && !index.startsWith('/')) {
        if (index === 'import') {
          this.showImportDialog();
          return;
        } else if (index === 'export') {
          this.showExportDialog();
          return;
        }
      }
      
      // 如果当前不在该路径，手动导航
      if (this.$route.path !== index) {
        this.navigateTo(index);
      }
    },
    async handleLimitChange() {
      this.page = 1;
      await this.getSchools();
      this.filterSchools(); // Re-apply search filter
    }
  },
  async created() {
    // 添加点击外部关闭下拉菜单的事件监听
    document.addEventListener('click', this.handleOutsideClick);
    
    // 等待用户信息加载完成后再获取菜单
    // 如果用户信息还未加载，等待一下再获取菜单
    if (!this.userInfo || !this.userInfo.role) {
      await this.$nextTick();
      // 最多等待2秒，确保用户信息已加载
      let retries = 0;
      while ((!this.userInfo || !this.userInfo.role) && retries < 20) {
        await new Promise(resolve => setTimeout(resolve, 100));
        retries++;
      }
    }
    
    // 获取用户菜单列表
    await this.getUserMenus();
    
    // 初始化路由监听，确保导航状态正确同步
    this.$watch('$route', (to) => {
      // 当路由变化时，更新本地存储的选中菜单
      const currentPath = to.path;
      console.log('路由变化:', currentPath);
      
      // 获取应当保存的菜单路径
      let menuPathToStore = this.currentActiveMenu;
      
      // 更新本地存储
      sessionStorage.setItem('lastSelectedMenu', menuPathToStore);
      console.log('路由变化 - 更新菜单路径:', menuPathToStore);
      
      // 手动触发更新
      this.$forceUpdate();
    });
  },
  async mounted() {
    // 获取学校列表并初始化
    await this.initSchoolList();
    
    // 确保导航菜单状态正确初始化
    this.$nextTick(() => {
      // 记录当前路径和激活菜单
      const currentPath = this.$route.path;
      const activeMenuPath = this.currentActiveMenu;
      console.log('页面加载 - 当前路径:', currentPath);
      console.log('页面加载 - 激活菜单:', activeMenuPath);
      
      // 如果没有本地存储的选中菜单，则使用计算出的激活菜单路径
      if (!sessionStorage.getItem('lastSelectedMenu')) {
        sessionStorage.setItem('lastSelectedMenu', activeMenuPath);
        console.log('保存菜单路径:', activeMenuPath);
      }
      
      // 手动触发一次菜单更新
      this.$forceUpdate();
    });
    
    console.log('用户信息:', this.userInfo);
    console.log('帐号信息:', this.accountInfo);
    console.log('权限信息:', this.userPermission);
    console.log('用户角色:', this.userRole);
    console.log('是否超级管理员:', this.isSuperAdmin);

    // 添加学校ID调试信息
    console.log('学校ID信息:', {
      currentSchoolId: this.currentSchoolId,
      schoolId: this.schoolId,
      displaySchoolId: this.displaySchoolId,
      schoolName: this.schoolName,
      schoolInfo: this.$store.state.school.schoolInfo
    });
    
    // 添加导航菜单调试信息
    console.log('导航菜单信息:', {
      activeIndex: this.activeIndex,
      filteredNavList: this.filteredNavList,
      normalMenuItems: this.filteredNavList.filter(i => !i.children || !i.children.length),
      submenuItems: this.filteredNavList.filter(i => i.children && i.children.length)
    });
    
    // 检查Menu组件是否注册成功
    console.log('全局组件检查:', {
      hasLocalElMenu: !!(this.$options.components && this.$options.components['el-menu']),
      currentPath: this.$route.path
    });
  },
  beforeUnmount() {
    document.removeEventListener('click', this.handleOutsideClick);
  }
};
</script>

<style lang="less" scoped>
.top-nav {
  width: 100%;
  height: 60px;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;

  .logo-wrapper {
    display: flex;
    align-items: center;
    min-width: 160px;
    margin-right: 5px;
    flex-shrink: 0;
    
    .logo-img {
      width: 150px;
      height: 45px;
      background: url('@/assets/image/login/logo.png') center no-repeat;
      background-size: contain;
      margin-right: 8px;
      flex-shrink: 0;
    }
    
    h1 {
      font-size: 16px;
      font-weight: bold;
      color: #333;
      margin: 0;
      white-space: nowrap;
    }
    
    .en-name {
      font-size: 10px;
      color: #999;
      margin-left: 5px;
      white-space: nowrap;
    }
  }

  .school-selector, .school-display {
    min-width: 180px;
    max-width: 250px;
    margin: 0 5px;
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    
    .current-school {
      display: flex;
      align-items: center;
      padding: 0 10px;
      height: 40px;
      
      .school-name {
        font-size: 16px;
        font-weight: 500;
        margin-right: 5px;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      
      .school-id {
        font-size: 12px;
        color: #909399;
      }
    }
    
    .switch-button {
      display: flex;
      align-items: center;
      cursor: pointer;
      padding: 0 12px;
      height: 32px;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
      background-color: #f5f7fa;
      transition: all 0.3s;
      flex-shrink: 0;
      
      &:hover {
        background-color: #ecf5ff;
        border-color: #c6e2ff;
        color: #409eff;
      }
      
      span {
        font-size: 14px;
        margin-right: 5px;
      }
      
      i {
        font-size: 12px;
      }
    }
    
    .school-dropdown {
      position: absolute !important;
      top: 45px !important;
      right: 0 !important;
      width: 300px !important;
      background-color: #fff !important;
      border-radius: 4px !important;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
      z-index: 3000 !important;
      max-height: 450px !important;
      display: flex !important;
      flex-direction: column !important;
      box-sizing: border-box !important;
      
      & * {
        box-sizing: border-box;
      }
      
      .filter-options {
        padding: 12px;
        border-bottom: 1px solid #f0f0f0;
        box-sizing: border-box;
        
        .filter-label {
          font-size: 14px;
          color: #606266;
          margin-bottom: 8px;
        }
        
        .el-select {
          width: 100%;
          
          :deep(.el-input) {
            width: 100%;
            
            .el-input__inner {
              width: 100%;
              box-sizing: border-box;
            }
          }
        }
      }
      
      .school-search {
        padding: 12px;
        border-bottom: 1px solid #f0f0f0;
        position: relative;
        box-sizing: border-box;
        
        input {
          width: 100%;
          padding: 8px 12px;
          border: 1px solid #dcdfe6;
          border-radius: 4px;
          font-size: 14px;
          box-sizing: border-box;
          
          &:focus {
            outline: none;
            border-color: #409eff;
          }
        }
        
        i {
          position: absolute;
          right: 20px;
          top: 20px;
          color: #909399;
        }
      }
      
      .filter-result-info {
        padding: 8px 12px;
        font-size: 13px;
        color: #909399;
        background-color: #f9f9f9;
        box-sizing: border-box;
        width: 100%;
        display: flex;
        justify-content: space-between;
        
        .clear-filter {
          cursor: pointer;
          margin-left: 8px;
          color: #409eff;
          white-space: nowrap;
          
          &:hover {
            text-decoration: underline;
          }
        }
      }
      
      .school-list-container {
        flex: 1;
        position: relative;
        width: 100%;
        
        // 添加列表容器样式
        .school-items-container {
          max-height: 600px;
          overflow-y: auto;
          width: 100%;
          
          &::-webkit-scrollbar {
            width: 6px;
          }
          
          &::-webkit-scrollbar-thumb {
            background-color: #dcdfe6;
            border-radius: 3px;
          }
          
          &::-webkit-scrollbar-track {
            background-color: #f5f7fa;
          }
        }
        
        // 字母索引样式
        .alphabet-index {
          position: absolute;
          right: 5px;
          top: 0;
          bottom: 0;
          width: 20px;
          background-color: rgba(245, 247, 250, 0.8);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;
          padding: 5px 0;
          z-index: 10;
          
          .letter-item {
            font-size: 10px;
            color: #909399;
            cursor: pointer;
            height: 14px;
            width: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            
            &.has-schools {
              color: #409eff;
              font-weight: bold;
            }
            
            &:hover {
              background-color: #ecf5ff;
            }
          }
        }
        
        // 字母分组标题样式
        .letter-group-title {
          position: sticky;
          top: 0;
          background-color: #f5f7fa;
          padding: 5px 15px;
          font-size: 12px;
          font-weight: bold;
          color: #606266;
          border-bottom: 1px solid #ebeef5;
          z-index: 5;
        }
        
        .virtual-list {
          max-height: 600px;
          overflow-y: auto;
          width: 100%;
          box-sizing: border-box;
        }
        
        .school-scrollbar {
          height: 600px;
          width: 100%;
          overflow-y: auto;
        }
        
        .school-item {
          padding: 10px 15px;
          cursor: pointer;
          display: flex;
          flex-direction: column;
          border-bottom: 1px solid #f0f0f0;
          transition: background-color 0.2s;
          background-color: #fff;
          
          &:hover {
            background-color: #f5f7fa;
          }
          
          &.active {
            background-color: #ecf5ff;
            color: #409eff;
          }
          
          .school-name {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 3px;
            word-break: break-all;
            line-height: 1.4;
          }
          
          .school-id {
            font-size: 12px;
            color: #909399;
          }
        }
      }
      
      .no-result {
        padding: 20px;
        text-align: center;
        color: #909399;
        font-size: 14px;
      }
    }
  }
  
  .school-display {
    margin-left: 5px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    height: 40px;
    
    .school-name {
      font-size: 16px;
      font-weight: 500;
      margin-right: 5px;
      max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    .school-id {
      font-size: 12px;
      color: #909399;
    }
  }

  .nav-menu {
    flex: 1;
    border-bottom: none;
    margin-left: 30px;
    background-color: #fff !important;
    
    :deep(.el-menu-item) {
      height: 60px;
      line-height: 60px;
      font-size: 14px;
      border-bottom: 2px solid transparent;
      
      &.is-active {
        color: #40DBBC !important;
        border-bottom-color: #40DBBC !important;
      }
      
      &:hover {
        color: #40DBBC !important;
        background-color: transparent !important;
      }
    }
    
    :deep(.el-submenu) {
      &.is-active {
        .el-submenu__title {
          color: #40DBBC !important;
          border-bottom-color: #40DBBC !important;
        }
      }
      
      .el-submenu__title {
        height: 60px;
        line-height: 60px;
        font-size: 14px;
        border-bottom: 2px solid transparent;
        
        &:hover, &:focus {
          color: #40DBBC !important;
          background-color: transparent !important;
        }
        
        i {
          color: inherit;
        }
      }
    }
  }

  .user-info {
    display: flex;
    align-items: center;
    margin-left: 5px;
    padding-right: 5px;
    flex-shrink: 0;
    min-width: 80px;
    max-width: 120px;
    position: relative;
    
    .avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background-color: #f0f0f0;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 8px;
      flex-shrink: 0;
      
      img {
        width: 18px;
        height: 18px;
      }
    }
    
    // 新的用户名下拉菜单样式
    .user-name-dropdown {
      font-size: 13px;
      color: #333;
      cursor: pointer;
      max-width: 70px;
      display: flex;
      align-items: center;
      
      .user-name-text {
        max-width: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      
      i {
        margin-left: 3px;
        font-size: 12px;
        flex-shrink: 0;
      }
    }
  }
}

/* 添加全局样式确保下拉菜单显示 */
:global(.el-dropdown-menu) {
  z-index: 3000 !important;
}

/* 确保下拉菜单和弹窗不会被截断 */
body {
  overflow-x: hidden;
}

/* Element UI菜单样式覆盖 */
.el-menu--horizontal .el-menu {
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}

.el-menu--horizontal .el-menu .el-menu-item, 
.el-menu--horizontal .el-menu .el-submenu__title {
  height: 36px;
  line-height: 36px;
}

.el-menu--horizontal .el-menu .el-menu-item:hover, 
.el-menu--horizontal .el-menu .el-submenu__title:hover {
  background-color: #f5f7fa !important;
  color: #40DBBC !important;
}

.el-menu--horizontal .el-menu .el-menu-item.is-active {
  color: #40DBBC !important;
  background-color: #f0fff9 !important;
}

/* 调整下拉菜单的z-index，确保在最顶层 */
.el-menu--popup {
  z-index: 3001 !important;
}

/* 确保Element UI组件的弹出层始终在顶层 */
.el-select-dropdown, 
.el-dropdown-menu, 
.el-popper,
.el-tooltip__popper {
  z-index: 3000 !important;
}

 /* 确保用户下拉菜单显示 */
 .top-nav .user-info .user-name .drop-down {
   position: absolute;
   top: 30px;
   right: 0;
   background-color: #fff;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
   padding: 10px;
   z-index: 3000 !important;
   min-width: 80px;
 }
 
   /* 升学确认对话框样式 */
  .promotion-confirm-dialog {
    .el-message-box__header {
      background-color: #fdf6ec;
      border-bottom: 1px solid #f0e6d3;
    }
    
    .el-message-box__title {
      color: #e6a23c;
      font-weight: bold;
    }
    
    .el-message-box__content {
      padding: 20px;
      font-size: 14px;
      line-height: 1.6;
      color: #606266;
    }
    
    .el-message-box__btns {
      padding: 10px 20px 20px;
    }
    
    .el-button--primary {
      background-color: #e6a23c;
      border-color: #e6a23c;
      
      &:hover {
        background-color: #d48806;
        border-color: #d48806;
      }
    }
    
    .el-button--default {
      &:hover {
        color: #e6a23c;
        border-color: #e6a23c;
      }
    }
  }
  
  /* 升学进度条对话框样式 */
  .promotion-progress-dialog {
    .el-message-box__header {
      background-color: #f0f9ff;
      border-bottom: 1px solid #b3d8ff;
    }
    
    .el-message-box__title {
      color: #409eff;
      font-weight: bold;
    }
    
    .el-message-box__content {
      padding: 20px;
      font-size: 14px;
      line-height: 1.6;
      color: #606266;
    }
    
    .el-progress {
      margin-top: 10px;
    }
    
    .el-progress-bar__outer {
      background-color: #f0f9ff;
    }
    
    .el-progress-bar__inner {
      background: linear-gradient(90deg, #409eff, #67c23a);
      transition: width 0.3s ease;
    }
  }
</style>

<!-- 添加全局样式确保弹出层显示 -->
<style>
/* 确保Element UI的下拉菜单和弹窗显示在最上层 */
.el-select-dropdown, 
.el-dropdown-menu, 
.el-popper,
.el-tooltip__popper {
  z-index: 3000 !important;
}

/* 确保下拉菜单和弹窗不会被截断 */
body {
  overflow-x: hidden;
}

/* Element UI菜单样式覆盖 */
.el-menu--horizontal .el-menu {
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}

.el-menu--horizontal .el-menu .el-menu-item, 
.el-menu--horizontal .el-menu .el-submenu__title {
  height: 36px;
  line-height: 36px;
}

.el-menu--horizontal .el-menu .el-menu-item:hover, 
.el-menu--horizontal .el-menu .el-submenu__title:hover {
  background-color: #f5f7fa;
  color: #40DBBC;
}

.el-menu--horizontal .el-menu .el-menu-item.is-active {
  color: #40DBBC;
  background-color: #f0fff9;
}

/* 确保用户下拉菜单显示 */
.top-nav .user-info .user-name .drop-down {
  position: absolute;
  top: 30px;
  right: 0;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 10px;
  z-index: 3000 !important;
  min-width: 80px;
}
</style> 